<template>
  <div
    class="validate-code disabled-select" 
    :style="`width:${width}; height:${height}`"
    @click="refreshCode"
  >
    <canvas ref="canvasRef" :width="canvasWidth" :height="canvasHeight"></canvas>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, defineProps, defineEmits, nextTick } from 'vue'

// 定义组件名称
defineOptions({
  name: 'ValidCode'
})

// 定义props
const props = defineProps({
  width: {
    type: String,
    default: '120px'
  },
  height: {
    type: String,
    default: '42px'
  },
  length: {
    type: Number,
    default: 4
  },
  refresh: {
    type: Number
  }
})

// 定义emits
const emit = defineEmits(['update:modelValue'])

// 响应式数据
const canvasRef = ref(null)
const canvasWidth = ref(120)
const canvasHeight = ref(42)
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz23456789'
const code = ref('')

// 生成随机颜色
const randomColor = (min, max) => {
  const r = randomNum(min, max)
  const g = randomNum(min, max)
  const b = randomNum(min, max)
  return `rgb(${r},${g},${b})`
}

// 生成随机数
const randomNum = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min)
}

// 刷新验证码
const refreshCode = () => {
  drawCode()
}

// 绘制验证码
const drawCode = () => {
  const canvas = canvasRef.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  ctx.textBaseline = 'middle'
  ctx.fillStyle = '#f5f7fa'
  ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value)

  // 生成验证码
  let generatedCode = ''
  for (let i = 0; i < props.length; i++) {
    const char = chars.charAt(Math.floor(Math.random() * chars.length))
    generatedCode += char

    // 随机字体大小
    const fontSize = randomNum(16, 20)
    ctx.font = `${fontSize}px Arial`

    // 随机旋转角度
    const rotate = randomNum(-30, 30) * Math.PI / 180

    // 计算位置
    const x = canvasWidth.value / (props.length + 1) * (i + 1)
    const y = canvasHeight.value / 2

    // 随机颜色
    ctx.fillStyle = randomColor(50, 160)

    // 绘制文字
    ctx.save()
    ctx.translate(x, y)
    ctx.rotate(rotate)
    ctx.fillText(char, -fontSize/2, 0)
    ctx.restore()
  }

  // 绘制干扰线
  for (let i = 0; i < 3; i++) {
    ctx.beginPath()
    ctx.moveTo(randomNum(0, canvasWidth.value), randomNum(0, canvasHeight.value))
    ctx.lineTo(randomNum(0, canvasWidth.value), randomNum(0, canvasHeight.value))
    ctx.strokeStyle = randomColor(150, 230)
    ctx.lineWidth = 1
    ctx.stroke()
  }

  // 绘制干扰点
  for (let i = 0; i < 30; i++) {
    ctx.beginPath()
    ctx.arc(randomNum(0, canvasWidth.value), randomNum(0, canvasHeight.value), 1, 0, 2 * Math.PI)
    ctx.fillStyle = randomColor(150, 230)
    ctx.fill()
  }

  code.value = generatedCode
  emit('update:modelValue', generatedCode)
}

// 监听器
watch(() => props.refresh, () => {
  drawCode()
})

watch(() => props.width, (val) => {
  canvasWidth.value = parseInt(val)
  nextTick(() => {
    drawCode()
  })
}, { immediate: true })

watch(() => props.height, (val) => {
  canvasHeight.value = parseInt(val)
  nextTick(() => {
    drawCode()
  })
}, { immediate: true })

// 生命周期钩子
onMounted(() => {
  drawCode()
})
</script>

<style scoped>
.validate-code {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f7fa;
  transition: all 0.3s ease;
}

.validate-code:hover {
  opacity: 0.8;
}

.disabled-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
